<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="commom::title('首页')"></head>
    <style>
      .line-data{
        display: flex;
       
        
      }
      .true-data{
        border: 1px solid black;
        width: 380px;
        height: 100px;
        margin-left: 15px;
        
        align-items: center;
        text-align: center;
      }


      .cow2{
        display: flex;
        flex-wrap: wrap;
        
      }

      .cow2-box{
        width: 90%;
        margin-top: 10px;
       
      }
      .cow2-box{
        width: 775px;
        height: 368px;
        border: 2px solid black;
        text-align: center;
        margin-left: 15px;
      }

      .title{
        font-weight:700;
        margin-top: 10px;
        margin-bottom: 10px;
      }
    </style>
</head>
<body>
<div  >

    <div class="line-data">
        <div class="true-data">
            <div><h2>22</h2></div>
            <div><h4>入住人数</h4></div>
        </div>
        <div class="true-data">
            <div><h2>22</h2></div>
            <div><h4>今日访客</h4></div>
        </div>
        <div class="true-data">
            <div><h2>22</h2></div>
            <div><h4>寝室数量</h4></div>
        </div>
        <div class="true-data">
            <div><h2>22</h2></div>
            <div><h4>今年收入</h4></div>
        </div>
    </div>
    

<di class="cow2">

    <div class="cow2-box">
        <div class="title">入住性别</div>
        <div class="table-detail"></div>
    </div>
    <div class="cow2-box">
        <div class="title">入住柱状图</div>
        <div class="table-detail"></div>
    </div>
    <div class="cow2-box">
        <div class="title">药品</div>
        <div class="table-detail"></div>
    </div>
    <div class="cow2-box">
        <div class="title">年收费柱状图</div>
        <div class="table-detail"></div>
    </div>
</di>
 



    



</div>

<script th:src="@{/static/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/js/lay-config.js(v=1.0.4)}" charset="utf-8"></script>
<script>
    // setInterval("document.getElementById('datetime').innerHTML=new Date().toLocaleString();", 1000);
    // layui.use(['layer', 'echarts'], function () {
    //     const $ = layui.jquery,
    //         layer = layui.layer,
    //         echarts = layui.echarts;

    //     /**
    //      * 报表功能
    //      */
    //     var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

    //     var optionRecords = {
    //         title: {
    //             text: '网站访问量'
    //         },
    //         tooltip: {
    //             trigger: 'axis',
    //             axisPointer: {
    //                 type: 'cross',
    //                 label: {
    //                     backgroundColor: '#1d8884'
    //                 }
    //             }
    //         },
    //         legend: {
    //             data: ['邮件访问', '网页广告', '视频广告', '直接访问', '搜索引擎']
    //         },
    //         toolbox: {
    //             feature: {
    //                 saveAsImage: {}
    //             }
    //         },
    //         grid: {
    //             left: '3%',
    //             right: '4%',
    //             bottom: '3%',
    //             containLabel: true
    //         },
    //         xAxis: [
    //             {
    //                 type: 'category',
    //                 boundaryGap: false,
    //                 data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    //             }
    //         ],
    //         yAxis: [
    //             {
    //                 type: 'value'
    //             }
    //         ],
    //         series: [
    //             {
    //                 name: '邮件访问',
    //                 type: 'line',
    //                 stack: '总量',
    //                 areaStyle: {},
    //                 data: [100, 152, 101, 114, 90, 230, 210]
    //             },
    //             {
    //                 name: '网页广告',
    //                 type: 'line',
    //                 areaStyle: {},
    //                 data: [600, 300, 220, 234, 290, 330, 310]
    //             },
    //             {
    //                 name: '视频广告',
    //                 type: 'line',
    //                 stack: '总量',
    //                 areaStyle: {},
    //                 data: [650, 232, 201, 154, 190, 330, 410]
    //             },
    //             {
    //                 name: '直接访问',
    //                 type: 'line',
    //                 stack: '总量',
    //                 areaStyle: {},
    //                 data: [300, 200, 250, 334, 390, 350, 250]
    //             },
    //             {
    //                 name: '搜索引擎',
    //                 type: 'line',
    //                 stack: '总量',
    //                 label: {
    //                     normal: {
    //                         show: true,
    //                         position: 'top'
    //                     }
    //                 },
    //                 areaStyle: {},
    //                 data: [350, 450, 750, 800, 1290, 1330, 1320]
    //             }
    //         ]
    //     };
    //     echartsRecords.setOption(optionRecords);


    //     /**
    //      * 玫瑰图表
    //      */
    //     var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
    //     var optionPies = {
    //         title: {
    //             text: '玫瑰图',
    //             left: 'center'
    //         },
    //         tooltip: {
    //             trigger: 'item',
    //             formatter: '{a} <br/>{b} : {c} ({d}%)'
    //         },
    //         legend: {
    //             orient: 'vertical',
    //             left: 'left',
    //             data: ['直接访问', '邮件访问', '网页广告', '视频广告', '搜索引擎']
    //         },
    //         series: [
    //             {
    //                 name: '访问来源',
    //                 type: 'pie',
    //                 radius: '55%',
    //                 center: ['50%', '60%'],
    //                 roseType: 'radius',
    //                 data: [
    //                     {value: 350, name: '直接访问'},
    //                     {value: 200, name: '邮件访问'},
    //                     {value: 180, name: '网页广告'},
    //                     {value: 135, name: '视频广告'},
    //                     {value: 500, name: '搜索引擎'}
    //                 ],
    //                 emphasis: {
    //                     itemStyle: {
    //                         shadowBlur: 10,
    //                         shadowOffsetX: 0,
    //                         shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                     }
    //                 }
    //             }
    //         ]
    //     };
    //     echartsPies.setOption(optionPies);

    //     // echarts 窗口缩放自适应
    //     window.onresize = function () {
    //         echartsRecords.resize();
    //     }

    // });
</script>
</body>
</html>
